<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Films</title>
    <link rel="stylesheet" type="text/css" href="/static/bootmetro/css/bootmetro.css">
    <link rel="stylesheet" type="text/css" href="/static/bootmetro/css/bootmetro-responsive.css">
    <link rel="stylesheet" type="text/css" href="/static/bootmetro/css/bootmetro-icons.css">

    <link rel="stylesheet" type="text/css" href="/static/bootmetro/css/demo.css">
</head>
<body>

<style type="text/css">
    body {
        background-color: #0e0e0e;
    }

    #film-list-wapper {
        background-color: #847d6b;
        height: 100%;
    }

    #film-list {
        height: 90%;
        max-width: 98%;
    }

    #content-row {
        height: 80%;
        margin: 0 20px 0 20px;
    }

    .listview-item.small .listview-item-object[class*='icon-'] {
        width: 40px;
        height: 40px;
        font-size: 40px;
        line-height: 40px;
    }

    .play {
        width: 80%;
        height: 95%;
    }

    .height-block{
        min-height: 285px;
    }
</style>


<div id="nav-bar">
    <div class="pull-left">
        <div id="header-container">
            <a class="win-command" id="logged-user">
                <span class="win-commandicon win-commandring   icon-home-2"></span>
            </a>
            <div class="pull-right">
                <h1>
                    Films
                </h1>
            </div>
        </div>
    </div>
</div>

<div class="row-fluid" id="content-row">
    <div class="span3" id="film-list-wapper">
        <h1> {{ header }} </h1>
        <div class="listview list-layout small" id="film-list">
            {% for item in items %}
                {% if item.isdir %}
                    <a class="listview-item small"
                       href="{% url 'film' %}?path={{ item.url|urlencode }}">
                        <div class="pull-left">
                            <div class="listview-item-object  icon-folder"></div>
                        </div>
                        <div class="listview-item-body">
                            <h4>{{ item.name }}</h4>
                        </div>
                    </a>
                {% else %}
                    <a class="listview-item small"
                    href="{% url 'film' %}?video={{ item.url|urlencode }}&path={{ item.parenturl|urlencode }}">
                        <div class="pull-left">
                            <div class="listview-item-object icon-video"></div>
                        </div>
                        <div class="listview-item-body">
                            <h4>{{ item.name }}</h4>
                        </div>
                    </a>
                {% endif %}

            {% endfor %}
        </div>
    </div>
    <div class="span9">
        {% if video %}
            <video src="{{ video|urlencode }}" controls="controls" autoplay="true" class="play">
                该浏览器似乎不支持video标签
            </video>
        {% else %}
            <div class="play row">
                <div class="span4 offset4">
                    <div class="height-block"></div>
                    <h1>
                        <strong>请选择视频播放</strong>
                    </h1>
                </div>

            </div>
        {% endif %}
    </div>

</div>

</body>
</html>